<template>
	<div class="screen-wrapper">
		<DashboardHeader />
		<div class="dashboard-grid">
			<div class="left-column">
				<InfoPanel title="人员统计">
					<StaffStatsPanel />
				</InfoPanel>
				<InfoPanel title="各部门人员统计">
					<DeptStaffChart />
				</InfoPanel>
				<InfoPanel title="能力结构统计">
					<SkillChart />
				</InfoPanel>
			</div>

			<div class="center-column">
				<div class="salary-panels-container">
					<SalaryPanel type="month" amount="38.00" />
					<SalaryPanel type="quarter" amount="138.00" />
					<SalaryPanel type="year" amount="688.00" />
				</div>
				<MapPanel />
			</div>

			<div class="right-column">
				<InfoPanel title="部门人力成本构成">
					<DeptCostChart />
				</InfoPanel>
				<InfoPanel title="年龄、司龄、工龄结构">
					<AgeStructurePanel />
				</InfoPanel>
				<InfoPanel title="性别统计">
					<GenderStatsPanel />
				</InfoPanel>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import DashboardHeader from "./components/DashboardHeader.vue";
import InfoPanel from "./components/InfoPanel.vue";
import SalaryPanel from "./components/SalaryPanel.vue";
import MapPanel from "./components/MapPanel.vue";

import StaffStatsPanel from "./components/panels/StaffStatsPanel.vue";
import DeptStaffChart from "./components/panels/DeptStaffChart.vue";
import SkillChart from "./components/panels/SkillChart.vue";
import DeptCostChart from "./components/panels/DeptCostChart.vue";
import AgeStructurePanel from "./components/panels/AgeStucturePanel.vue";
import GenderStatsPanel from "./components/panels/GenderStatsPanel.vue";
</script>

<style lang="less" scoped>
@import "./variables.less";

.screen-wrapper{
    width: 100%;
  min-height: 100vh;
  padding: @base-padding;
  display: flex;
  flex-direction: column;
  background-color: @bg-color-base;
}

.dashboard-grid {
	display: grid;
	grid-template-columns: 1fr 2fr 1fr;
	gap: @grid-gap;
	flex-grow: 1;
	width: 100%;
}

.left-column,
.right-column,
.center-column {
	display: flex;
	flex-direction: column;
	gap: @grid-gap;
}

.salary-panels-container {
	display: flex;
	gap: 15px; // Space between salary panels
	flex-shrink: 0; // Prevent shrinking
}
</style>
